<template>
<div class="container">
        <h1>安全管理总览表</h1>
        <div class="subtitle">台账索引与关键日期追踪系统</div>
        
        <div class="controls">
            <div>
                <button class="btn" id="addRecord" @click="isShow=true">添加新记录</button>
                <Teleport to="body">
                    <div class="modal" v-if="isShow">
                        <h2>我是弹窗的标题</h2>
                        <p>我是弹窗的内容</p>
                        <button @click="isShow=false">关闭弹窗</button>
                    </div>
                </Teleport>
                <button class="btn" id="refreshData">刷新数据</button>
            </div>
            <div>
                <button class="btn btn-export" id="exportExcel">导出Excel</button>
            </div>
        </div>
        
        <div class="filters">
            <select class="filter-select" id="categoryFilter">
                <option value="">所有台账类别</option>
                <option value="责任制">安全生产责任制</option>
                <option value="制度规程">安全管理制度与操作规程</option>
                <option value="教育培训">安全教育与培训</option>
                <option value="隐患排查">隐患排查与治理</option>
                <option value="职业卫生">职业卫生管理</option>
                <option value="应急管理">应急管理</option>
                <option value="事故管理">事故管理</option>
                <option value="特种设备">特种设备与安全设施</option>
                <option value="相关方">相关方安全管理</option>
                <option value="安全投入">安全投入与费用</option>
                <option value="劳保用品">劳保用品管理</option>
                <option value="其他">其他台账</option>
            </select>
            
            <!-- <select class="filter-select" id="statusFilter">
                <option value="">所有状态</option>
                <option value="正常">正常</option>
                <option value="即将到期">即将到期</option>
                <option value="已过期">已过期</option>
            </select> -->
            <select v-model="selectedStatusName" v-on:change="handleSelectChange($event)">
                <option value="" disabled>请选择状态</option>
                <option v-for="option in statusOptions" :key="option.id" :value="option.name" >
                    {{ option.name }}
                </option>
            </select>
            <p>{{ selectedStatusName }}</p>
            <!-- <p>当前选中名称：{{ statusStore.getStatusNameById(selectedStatusId) }}</p> -->
            <p>被选中的ID：{{selectedStatusId }}</p>
        </div>
        
        <table id="recordsTable">
            <thead>
                <tr>
                    <th width="15%">台账类别</th>
                    <th width="20%">具体台账名称</th>
                    <th width="15%">存放位置</th>
                    <th width="10%">负责人</th>
                    <th width="12%">最近更新日期</th>
                    <th width="12%">关键日期</th>
                    <th width="8%">状态</th>
                    <th width="8%">操作</th>
                </tr>
            </thead>
            <tbody id="tableBody">
                <!-- 数据将通过JavaScript动态生成 -->
                 <!-- 遍历表格数据，生成每行 -->
                <tr v-for="(item, index) in statusOptions" :key="item.id">
                    <!-- 每个单元格绑定对应数据 -->
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td> {{ item.name }}</td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td> {{ item.name }}</td>
                    <td :class="{'status-normal':item.name==='正常'}">{{ item.name }}</td>
                    <td> {{ item.name }}</td>
                </tr>
            </tbody>
        </table>
        
        <div class="summary">
            <h3>台账状态概览</h3>
            <div id="statusSummary">
                <!-- 状态概览将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import {Category, type AnQuan,Status} from "@/types/index";
// import { getAllStatusOptions, getStatusNameById,StatusEnum } from '@/types/Status';
import { StatusStore } from '@/store/Status';
import { storeToRefs } from 'pinia';

// isShow实现弹窗页面的标识
let isShow=ref(false);

const statusStore=StatusStore()
// const {StatusEnum}=storeToRefs(statusStore)
// statusStore

// 绑定选中的id属性
const selectedStatusName=ref<string>('');
// const selectedStatusId=ref<number>(0);
const selectedStatusId=computed(()=>{
    return statusStore.getStatusNameByName(selectedStatusName.value);
});

// const selectedFruitId = computed(() => {
//   // 如果没有选择，返回空
//   if (!selectedStatusName.value) return '';
  
//   // 在 fruitOptions 数组中查找名称匹配的项，并返回其 id [citation:2]
//   const selectedFruit = statusStore.(fruit => fruit.name === selectedFruitName.value);
//   return selectedFruit ? selectedFruit.id : '未找到对应ID';
// });
// 获取所有状态选项列表(从枚举对象中获取)
const statusOptions =statusStore.getAllStatusOptions()


function handleSelectChange(event:any){
    // selectedStatusId.value=event.target.selectedIndex;
}

// 示例数据 - 在实际应用中，这些数据可能来自后端或用户输入
// const records =reactive<{anquanList:AnQuan[]}>({
//     anquanList:[
//         {id:1,category:Category.责任制,name:"特中",location:"档案区",responsible:"王五",lastUpdate:new Date("2023-10-10"),criticalDate:new Date("2024-04-10"),status:Status.正常},
//         {id:2,category:Category.制度规程,name:"特中",location:"档案区",responsible:"王五",lastUpdate:new Date("2023-10-10"),criticalDate:new Date("2024-04-10"),status:Status.即将到期},
//     ]
// });
</script>

<style scoped lang="scss">

* {
            box-sizing: border-box;
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 10px;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        .subtitle {
            text-align: center;
            color: #7f8c8d;
            margin-bottom: 30px;
        }
        .controls {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 15px;
            background: #ecf0f1;
            border-radius: 5px;
        }
        .btn {
            padding: 8px 15px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .btn:hover {
            background: #2980b9;
        }
        .btn-export {
            background: #27ae60;
        }
        .btn-export:hover {
            background: #219653;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th {
            background-color: #34495e;
            color: white;
            text-align: left;
            padding: 12px 15px;
            position: sticky;
            top: 0;
        }
        td {
            padding: 10px 15px;
            border-bottom: 1px solid #ddd;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
        .status-cell {
            text-align: center;
        }
        .status-normal {
            color: #27ae60;
            font-weight: bold;
        }
        .status-warning {
            color: #f39c12;
            font-weight: bold;
        }
        .status-danger {
            color: #e74c3c;
            font-weight: bold;
        }
        .summary {
            background: #ecf0f1;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
        }
        .summary h3 {
            margin-top: 0;
            color: #2c3e50;
        }
        .filters {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }
        .filter-select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        @media (max-width: 768px) {
            .controls, .filters {
                flex-direction: column;
                gap: 10px;
            }
            table {
                font-size: 14px;
            }
            th, td {
                padding: 8px 10px;
            }
        }

.modal{
    position:absolute ;
    top: 50%;
    left: 50%;
    background-color: #3498db;
    font-size: medium;
}
</style>